.business-integration {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .title {
    width: 546px;
    height: 65px;
    background: url("@/assets/business-integration/icon-bj-4.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 13px 0;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 28px;
    color: #ffffff;
  }

  .bi-left,
  .bi-right {
    width: 810px;
    height: 100%;
    flex-shrink: 0;

    .doudou-card {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 31px;
      height: 30%;
    }

    .chart-shuzihua {
      .dynamic-data-item {
        width: 230px;
        height: 342px;
        // background: linear-gradient(to bottom, #2190f78a, #2190f700);
        // ;
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: center;
        font-size: 40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        border-radius: 10px;
        .ddi-title {
          font-size: 28px;
          transform: translateY(23px);
        }
        .ddi-value {
          display: flex;
          font-size: 45px;
          display: inline-block;
          font-family: neirong;
          .ddi-unit {
            font-size: 25px;
            color: #3fd0ff;
            transform: translateY(22px);
          }
        }
      }
    }
  }

  .szhnlkapt-title {
    width: 437px;
    height: 52px;
    font-size: 26px;
    background-image: url("@/assets/achievement-aggregation/icon-bj-4.png");
    background-size: 100% 82%;
    background-repeat: no-repeat;
    text-align: center;
    margin: 19px auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;

    .triangle {
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 14px solid rgba(52, 152, 255, 1);
      margin-left: 14px;
    }
  }

  .bi-left {
    // .shuzihualianluoren {
    //   height: 100%;
    //   display: flex;
    //   padding: 20px 0;
    //   .ea-img {
    //     position: relative;
    //     width: 45%;
    //     height: 85%;
    //     transform: translateX(64px);
    //     img {
    //       position: absolute;
    //       &.ea-img1 {
    //         bottom: 38%;
    //         width: 160px;
    //         left: 26%;
    //         animation: rotate1 2s linear infinite;
    //       }
    //       &.ea-img2 {
    //         width: 73%;
    //         bottom: 41px;
    //         left: 13%;
    //       }
    //       &.ea-img3 {
    //         width: 100%;
    //         bottom: 0px;
    //       }
    //     }
    //   }
    //   .ea-value {
    //     position: relative;
    //     width: 65%;
    //     height: 100%;
    //     transform: translate(134px, 11px);
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: center;
    //     font-family: neirong;
    //     .eav-item {
    //       display: flex;
    //       flex-direction: row;
    //       color: #fff;
    //       background-image: url("@/assets/achievement-aggregation/line.png");
    //       background-size: 300px 3px;
    //       background-repeat: no-repeat;
    //       position: relative;
    //       align-items: center;
    //       background-position: -26px 48px;
    //       &::before {
    //         content: "";
    //         position: absolute;
    //         top: -5px;
    //         left: -40px;
    //         width: 40px;
    //         height: 40px;
    //         background-image: url("@/assets/village-level/qingyang/arr.png");
    //         background-size: cover;
    //       }
    //       .eavi-title {
    //         font-size: 28px;
    //         display: inline-block;
    //         width: 217px;
    //       }
    //       .eavi-value {
    //         flex: 1 0;
    //         text-align: right;
    //         font-size: 32px;
    //         display: inline-block;
    //         height: 51px;
    //         line-height: 49px;
    //       }
    //       &:not(:first-child) {
    //         margin-top: 34px;
    //       }
    //       &:nth-child(1) {
    //         .eavi-value {
    //           background-image: linear-gradient(
    //             to right,
    //             #1d80e0,
    //             #fff
    //           ); /* 渐变背景图片 */
    //           -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
    //           color: transparent; /* 设置文字颜色为透明 */
    //         }
    //       }
    //       &:nth-child(2) {
    //         .eavi-value {
    //           background-image: linear-gradient(
    //             to right,
    //             #71f7aa,
    //             #fff
    //           ); /* 渐变背景图片 */
    //           -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
    //           color: transparent; /* 设置文字颜色为透明 */
    //         }
    //       }
    //       &:nth-child(3) {
    //         .eavi-value {
    //           background-image: linear-gradient(
    //             to right,
    //             #d0fc66,
    //             #fff
    //           ); /* 渐变背景图片 */
    //           -webkit-background-clip: text; /* 使用文本作为背景剪裁区域 */
    //           color: transparent; /* 设置文字颜色为透明 */
    //         }
    //       }
    //     }
    //   }
    // }
  }

  .bi-right {
    .huodong-number {
      width: 230px;
      height: 342px;
      // background: linear-gradient(to bottom, #2190f78a, #2190f700);
      // ;
      display: flex;
      flex-direction: column;
      justify-items: center;
      justify-content: center;
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      border-radius: 10px;
      .ddi-imgs {
        position: relative;
        width: 100px;
        height: 100px;
        transform: translate(58px, -56px);
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 80%;
          height: 80%;
          transform: translate(-66%, -43%);
        }
      }
      .ddi-title {
        font-size: 28px;
      }
      .ddi-value {
        display: flex;
        font-size: 45px;
        display: inline-block;
        font-family: neirong;
        transform: translateY(23px);
        .ddi-unit {
          font-size: 25px;
          color: #3fd0ff;
          transform: translateY(22px);
        }
      }
    }
    .chart-fhsjcpsl-gb {
      top: 174px;
      left: 116px;
      z-index: 0;
      width: 290px;
      height: 290px;
      background-color: #486cc724;
      border-radius: 50%;
      border: 2px solid #486cc77a;
      position: absolute;
    }
    .chart-fhsjcpsl {
      transform: scaleY(0.95);
    }
    .chart-fhsjcpsl-fugai {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      position: absolute;
      background-image: url("@/assets/achievement-aggregation/circle-1.png");
      background-size: 65px 70px;
      background-repeat: no-repeat;
      background-position: 243px 290px;
    }
    .chart-fhsjcpsl-legend {
      width: 100%;
      height: 100%;
      top: 194px;
      left: 500px;
      z-index: 1;
      position: absolute;
      .cfl-item {
        color: #fff;
        font-size: 28px;
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        span {
          display: inline-block;
        }
        .cfli-dot {
          width: 16px;
          height: 16px;
          margin-right: 20px;
        }
        .cfli-name {
          width: 1500px;
        }
        .cfli-value {
          text-align: start;
        }
      }
    }
    .netdevice-gaojing {
      width: 100%;
      height: 330px;
      overflow: hidden;

      table {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid rgba(58, 121, 226, 1);
        display: flex;
        flex-direction: column;
        border-collapse: collapse;
        box-sizing: border-box;

        td,
        th {
          flex: 1 0;
          height: 100%;
          text-align: center;
          line-height: 55px;
          border: 1px solid rgba(58, 121, 226, 1);
          padding: 0 5px;
          box-sizing: border-box;

          &:nth-child(1) {
            flex: 0.5;
          }

          &:nth-child(4) {
            flex: 0.7;
          }
        }

        thead {
          width: 100%;
          height: 55px;
          display: flex;
          align-items: center;
          background: rgba(58, 121, 226, 0.1);

          tr {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;

            th {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 22px;
              color: #6ca7ff;
            }
          }
        }

        tbody {
          width: 100%;
          flex: 1 0;
          display: flex;
          flex-direction: column;
          overflow-y: auto;

          &::-webkit-scrollbar {
            display: none;
          }

          tr {
            width: 100%;
            height: 55px;
            display: flex;
            align-items: center;
            flex-shrink: 0;

            td {
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 22px;
              color: #ffffff;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  .circle_box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 78px;
    .ep-item {
      flex: 1 0;
      height: 140px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .epi-proportion {
        position: absolute;
        font-family: D-DIN Exp;
        font-weight: bold;
        font-size: 33px;
        color: #0084ff;
        display: flex;
        align-items: center;

        p {
          font-size: 24px;
          color: rgba(255, 255, 255, 1);
          margin: 0;
          padding: 0;
        }
      }
      .epi-title {
        position: absolute;
        bottom: -40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 23px;
        color: #ffffff;
      }
    }
  }

  .part {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .chart {
      width: 100%;
      flex: 1 0;
    }
  }

  .chart_item {
    width: 100%;
    //flex: 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .ea-img {
      position: relative;
      width: 314px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        position: absolute;
        &.ea-img2 {
          width: 100%;
        }
        &.ea-img1 {
          bottom: 30px;
          width: 88px;
          animation: rotate1 2s linear infinite;
        }
      }
    }
    .ea-value {
      position: relative;
      flex: 1 0;
      height: 100%;
      margin-left: 132px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-family: neirong;
      .eav-item {
        display: flex;
        flex-direction: row;
        color: #fff;
        background-image: url("@/assets/achievement-aggregation/line.png");
        background-size: 328px 1.5px;
        background-repeat: no-repeat;
        position: relative;
        align-items: center;
        background-position: -26px 48px;
        padding-right: 50px;
        box-sizing: border-box;
        &::before {
          content: "";
          position: absolute;
          top: 8px;
          left: -40px;
          width: 18px;
          height: 32px;
          background-image: url("@/assets/business-integration/left.png");
          background-size: cover;
          transform: rotate(180deg);
        }
        .eavi-title {
          font-size: 28px;
          display: inline-block;
          // width: 217px;
        }
        .eavi-value {
          flex: 1 0;
          text-align: right;
          font-size: 32px;
          display: inline-block;
          height: 51px;
          line-height: 49px;
          margin-right: 5px;
        }
        &:not(:first-child) {
          margin-top: 34px;
        }
        &:nth-child(1) {
          .eavi-value {
            color: rgba(0, 132, 255, 1); /* 设置文字颜色为透明 */
          }
        }
        &:nth-child(2) {
          .eavi-value {
            color: rgba(60, 255, 223, 1); /* 设置文字颜色为透明 */
          }
        }
      }
    }

    .tips {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;

      .tips_item {
        width: 272px;
        height: 52px;
        background: url("@/assets/business-integration/back.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }

        .label {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 22px;
          color: #ffffff;
        }

        .value {
          flex: 1 0;
          font-family: D-DIN Exp;
          font-weight: 400;
          font-size: 32px;
          color: #0084ff;
          text-align: right;
        }

        .unit {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          margin: 8px 0 0 5px;
        }
      }
    }
  }

  .chart-legent {
    position: absolute;
    width: 50%;
    bottom: 28%;
    .chart-legent_item {
      display: flex;
      align-items: center;
      margin-bottom: 50px;

      &:last-child {
        margin-bottom: 0;
      }
      span {
        font-size: 28px;
        display: flex;
        align-items: center;
        &:nth-child(1) {
          flex: 1 0;
        }
        &:nth-child(2) {
          margin-left: 10px;
        }
        &:nth-child(3) {
          font-family: neirong;
        }
      }
    }
  }
}

@keyframes rotate1 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  0% {
    transform: translateY(0);
  }
}
@keyframes rotate2 {
  0% {
    transform: translateX(12%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(12%) rotateX(75deg) rotateZ(360deg);
  }
}
@keyframes rotate3 {
  0% {
    transform: translateX(31%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(31%) rotateX(75deg) rotateZ(-360deg);
  }
}
@keyframes rotate4 {
  0% {
    transform: translateX(69%) rotateX(-75deg) rotateZ(0);
  }
  100% {
    transform: translateX(69%) rotateX(-75deg) rotateZ(360deg);
  }
}
